import React, { Suspense, lazy } from 'react';

// 创建异步组件
const LazyChildComponent = lazy(() => import('./LazyChildComponent.jsx'))
// 创建LoadIng的组件
const LoadIng = React.createElement("div", {
  style: {
    "height": '100vh',
    "backgroundColor": 'green',
    "color": 'white',
    "fontSize": "40px",
    "lineHeight": '100vh',
    "textAlign": "center"
  }
},
  "Loading.......");
const LazyCom = () => {
  return (
    <div>
      {/* 在加载LazyChildComponent子组件时，先显示 fallback属性指定的内容。 */}
      <Suspense fallback={LoadIng}>
        <LazyChildComponent></LazyChildComponent>
      </Suspense>
    </div>
  );
}

export default LazyCom;
